<template>
    <div>
        <fieldset> 
            <legend><h3>产品配置</h3></legend>
        <div>
            sku：<el-input style="width:200px;" v-model="search.sku" />
            系统：<el-select v-model="search.systemcode">
                        <el-option
                        v-for="item in search.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button @click="searchData">查询</el-button>
                    <el-button type="success" @click="openDialog">新增</el-button>
            <el-table  border  
					:data="content"
					stripe
					style="width: 100%" id="celltable">
					<el-table-column prop="sku" label="SKU" align="center"> </el-table-column>
					<el-table-column prop="title" label="标题" align="center">  </el-table-column>
					<el-table-column prop="price" label="价格（分）" align="center">  </el-table-column>
                    <el-table-column prop="systemcode" label="系统类型" align="center">  </el-table-column>
					<el-table-column label="图片" align="center">
						<template scope="scope">
							<a v-bind:href="scope.row.imgUrl" target="_blank"><img width='100px' height="100px;" v-bind:src="scope.row.imgUrl"/></a>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" width="100px;" align="left">
                        <template scope="scope">
							<span v-if="scope.row.status == '1'">启用</span>
                            <span v-if="scope.row.status == '0'">失效</span>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center"> </el-table-column>
					<el-table-column label="操作" width="230px;" align="left">
						<template scope="scope">
							<el-button size="mini" @click="openUpdateDialog(scope.row.sku,scope.row.title,scope.row.price,scope.row.systemcode,scope.row.imgUrl,scope.row.status,scope.row.remark)">修改</el-button>
						</template>
					</el-table-column>
			</el-table>
			<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNo"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>

        </div>
        </fieldset>

        <el-dialog
                title="产品管理"
                :visible.sync="dialog.dialogProductVisible"
                width="30%">
                <table>
                    <tr>
                        <td>sku：</td><td>  <input type="text" style="width:300px;"  v-model="product.sku" > </td>
                    </tr>
                    <tr>
                        <td>图片路径：</td><td>  <input type="text" style="width:300px;"  v-model="product.imgUrl"> </td>
                    </tr>
                    <tr>
                        <td>价格，分：</td><td> <input type="text" style="width:300px;" v-model="product.price" > </td>
                    </tr>
                    <tr>
                        <td>标题：</td><td> <input type="text" style="width:300px;" v-model="product.title" > </td>
                    </tr>
                    <tr>
                        <td>系统类型：</td><td> <select style="width:300px;" v-model="product.systemcode" >
                                <option value="PERSONAL">个人</option>
                                <option value="COMPANY">企业</option>
                                <option value="STUDENT">学生口罩</option>
                            </select> </td>
                    </tr>
                    <tr>
                        <td>备注：</td><td> <input type="text" style="width:300px;" v-model="product.remark" > </td>
                    </tr>
                    <tr>
                        <td>状态：</td><td> <select style="width:300px;" v-model="product.status" >
                                <option value="1">启用</option>
                                <option value="0">失效</option>
                            </select> </td>
                    </tr>
                </table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog.dialogProductVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dooperation">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    import  {productpage,operationProduct} from '@/api/kz/kzproduct.js'

    export default {
        data(){
            return {
                search:{
                    sku : "",
                    systemcode: "",
                    options: [
                            {
                                value: '',
                                label: '全部'
                            }, 
                            {
                                value: 'PERSONAL',
                                label: '个人口罩'
                            }, 
                            {
                                value: 'COMPANY',
                                label: '企业口罩'
                            }
                        ],
                },
                dialog :{
                    dialogProductVisible : false 
                },
                product : {
                    sku : "",
                    imgUrl: "",
                    title: "",
                    price: "",
                    remark: "",
                    systemcode: "",
                    status : ""  
                },
                content : [],
                pageNo: 0,
                pageSize:10,
                total : 0,  
            }
        },
        mounted(){
            this.searchData();
        },
        methods:{
            searchData : function(){
				this.fetchData(0,10);
			},
			handleSizeChange: function (size) {
		        this.pageSize = size;
		        this.fetchData(this.pageNo , size );
		    },
		    handleCurrentChange: function(pageNo){
                // console.log(pageNo)
		        this.pageNo = pageNo;
		        this.fetchData(pageNo,this.pageSize);
		    },
		    fetchData: function(pageNo,pageSize){
		    	var _this = this ;
		    	var data= {
		    		pageNo : pageNo ,
                    pageSize : pageSize ,
                    sku         :_this.search.sku ,
                    systemcode  :_this.search.systemcode
		    	};
		    	productpage(data).then((response)=>{
                   	this.$set(this,"content",response.data.content);
					this.$set(this,"total",response.data.total);
                }).catch((error)=>{
                    console.log(error);
                })
            },
            openDialog : function(){
                this.dialog.dialogProductVisible = true;
                this.product.sku = "" ;
                this.product.title = "" ;
                this.product.price = "" ;
                this.product.systemcode = "" ;
                this.product.imgUrl = "" ;
                this.product.status = "" ;
                this.product.remark = "" ;
            },
            openUpdateDialog : function(
                sku,title,price,systemcode,imgUrl,status,remark){
                this.dialog.dialogProductVisible = true;
                this.product.sku = sku ;
                this.product.title = title ;
                this.product.price = price ;
                this.product.systemcode = systemcode ;
                this.product.imgUrl = imgUrl ;
                this.product.status = status ;
                this.product.remark = remark ;
            },
            dooperation : function(){
                operationProduct(this.product).then((response)=>{
                   this.fetchData(0,10);
                this.dialog.dialogProductVisible = false;
                }).catch((error)=>{
                    console.log(error);
                })
            }
        }
    }
</script>